<script>
export default {
  name: "WorkOrderXQ3View",
  data() {
    return {
      list:{},
    }
  },
  created() {
    // 获取参数
    this.id = this.$route.query.id
    // 查询
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/findById?id=`+this.id).then(res => {
      this.list = res.data.data;
      console.log(res)
      console.log(this.list)
    })
  },
  methods: {
    // 回到上一页
    index(){
      this.$router.push('/work_order')
    },
    //跳转巡检异常
    YC(id){
      this.$router.push({path: '/work_order_xjx', query: {id: id}})
    }
  }
}
</script>

<template>
<div>
  <div>
    <van-nav-bar style="float: left;font-size: 20px" @click-left="index()" left-arrow/>
    <h5 style="font-size: 20px;margin-left: 40%;height: 40px">巡检详情</h5>
  </div>
  <div>
    <h4>基本信息</h4>
    <div>
      <p>维保编号：{{list.workOrderNumber}}</p>
      <p>维保类型：{{list.type==1?"维修":list.type==2?"维保":"巡检"}}</p>
      <p>处理人：{{list.processor}}</p>
      <p>检查时间：{{list.workOrderChecktime}}</p>
      <p>创建时间：{{list.workOrderCreatetime}}</p>
    </div>
    <h4>巡检点位</h4>
    <div class="inspection - points">
      <div class="point">
        <span class="location - icon"></span>
        <span class="point - name">浙大森林A栋1号楼1层消防通道1位</span>
        <span class="status uncompleted">未完成</span>
      </div>
      <div class="point">
        <span class="location - icon"></span>
        <span class="point - name">浙大森林A栋1号楼1层消防通道1位</span>
        <span class="status completed">已完成</span>
<!--        <span class="sub - status normal">正常</span>-->
        <el-button>正常</el-button>
      </div>
      <div class="point">
        <span class="location - icon"></span>
        <span class="point - name">浙大森林A栋1号楼1层消防通道1位</span>
        <span class="status completed">已完成</span>
<!--        <span class="sub - status abnormal">异常</span>-->
        <el-button @click="YC(id)">异常</el-button>
      </div>
      <div class="point">
        <span class="location - icon"></span>
        <span class="point - name">浙大森林A栋1号楼1层环境传感器</span><span>  </span>
        <span class="temperature">{{list.workOrderPatrolFourOne}}°C</span>
<!--        <span class="sub - status normal">正常</span>-->
        <el-button>正常</el-button>
      </div>
    </div>
    </div>
</div>
</template>

<style scoped>
.inspection-points {
                width: 300px;
                margin: 20px auto;
              }

.point {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.location-icon {
              display: inline-block;
              width: 10px;
              height: 10px;
              background-color: blue;
              border-radius: 50%;
              margin-right: 5px;
            }

.point-name {
           flex: 1;
         }

.status {
  width: 80px;
  text-align: center;
}

.uncompleted {
  color: gray;
}

.completed {
  color: green;
}

.sub-status {
         display: inline-block;
         width: 60px;
         text-align: center;
         border-radius: 5px;
         padding: 3px;
         margin-left: 5px;
       }

.normal {
  background-color: green;
  color: white;
}

.abnormal {
  background-color: yellow;
  color: black;
}

.temperature {
  margin-right: 10px;
}
</style>